<template>
	<tui-card :image="card.img" :title="card.title" :tag="card.tag">
		<template v-slot:body>
			<view class="tui-default">
				请将<view class="emphasis">边框完整、图文清晰</view>的报告图片发送给我，我可以为你提供详细的医学解读。目前仅支持检查、检验报告单的解读，体检报告解读的能力正在升级中，敬请期待。
			</view>
		</template>
	</tui-card>
	<tui-card :image="secondCard.img" :title="secondCard.title" :tag="secondCard.tag" :background="'#E0EAFF'"> 
		<template v-slot:body>
			<view class="title">
				上传照片
			</view>
			<tui-upload :value="value" :serverUrl="serverUrl" @complete="result" @remove="remove"></tui-upload>
		</template>
	</tui-card>
</template>

<script setup>
import { ref } from 'vue';
import TuiCard from '../../components/thorui-uni/lib/thorui/tui-card/tui-card.vue';
import TuiUpload from '../../components/thorui-uni/lib/thorui/tui-upload/tui-upload.vue';
const card = ref({
	img: {
		url: '/static/images/news/avatar_2.jpg',
		width: 80,
		height: 80,
		circle: true
	},
	title: {
		text: '"你已进入报告解析功能"',
		color: '#A99999',
		size: 37
	},
	tag: {
		text: '刚刚',
		color: '#AAAAA9',
		size: 28
	}
});

const secondCard = ref({
	img: {
		url: '/static/images/news/avatar_2.jpg',
		width: 80,
		height: 80,
		circle: true
	},
	title: {
		text: 'AI智能报告解读',
		color: '#000000',
		size: 37
	},
	// ... other secondCard data
});

const value = ref([]); // 存储上传的图片数据
const serverUrl = "https://api.thorui.cn/"; // 上传接口地址

function result(e) {
	console.log(e);
	value.value = e.imgArr;
}

function remove(e) {
	console.log(e);
	const index = e.index;
	// 移除图片
}

</script>

<style lang="scss" scoped>
.tui-default {
	padding: 20rpx 70rpx; 
	background: #E0EAFF; 
	margin: 20rpx; 
	text-align: justify; 
	.emphasis {
		color: #0256FF; 
		font-weight: bold; 
	}
}
</style>